<template>
  <div>
    <!-- 动态class -->
    <!-- 
      两种情况:
         1.绑定对象  判断是否应用指定类名
         {类名:是否应用这个类名}
         2.绑定数组 应用多个类名
         ['类名1','类名2']
     -->
    <!-- <div :class="{ red: age >18  }">你好啊</div> -->
    <div :class="arr">你好啊
      <button @click="arr.push('mid')">点我添加类名</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "VueDemoApp",

  data() {
    return {
      age:20,
      flag: true,
      arr:['red','big']
    };
  },
};
</script>

<style>
div {
  width: 200px;
  height: 200px;
  background-color: skyblue;
}
.red {
  color: red;
}
.big{
  font-size: 40px;
}
.mid{
  text-align: center;
}
</style>